<template>
  <div class="main-tab">
    <div class="tabs-container">
      <div class="left-section">
        <div
          v-for="(item, index) in items"
          :key="index"
          :class="['item', { active: currentActive === index }]"
          @click="currentActive = index"
        >
          <img :src="item.img" alt="" class="item-icon" />
          <span class="item-text">{{ item.text }}</span>
        </div>
      </div>
      <div class="right-section">
        <!-- 话费充值区域 -->
        <div v-if="currentActive === 0" class="recharge-area">
          <h3 class="recharge-title">话费快充</h3>
          <div class="phone-number">
            <label>手机号码：</label>
            <input type="text" ref="phoneInput"  class="phone-input" />
            <span class="carrier">河北 联通</span>
            <a href="#" class="order-link">充值订单</a>
          </div>
          <div class="amount-area">
            <label>充值金额：</label>
            <div
              v-for="(amount, amountIndex) in amounts"
              :key="amountIndex"
              :class="['amount-btn', { selected: currentAmount === amountIndex }]"
              @click="currentAmount = amountIndex"
            >
              <span class="amount">{{ amount.value }}</span>
              <span class="price">{{ amount.price }}</span>
            </div>
          </div>
          <div class="coupon-area">
            <label>优惠类型：</label>
            <div class="coupon-option">
              <input type="radio" id="coupon1" name="coupon" />
              <label for="coupon1">暂无可用的优惠券</label>
              <p class="coupon-tip">仅可购买话费充值部分商品</p>
            </div>
            <div class="coupon-option">
              <input type="radio" id="coupon2" name="coupon" />
              <label for="coupon2">使用京豆最高可抵扣0.21元（当前可用21个）</label>
              <p class="coupon-tip">满50元可用，100京豆抵扣1元，最高抵20%，<a href="#">规则</a></p>
            </div>
          </div>
          <div class="pay-amount">
            <label>应付金额：</label>
            <span class="total-amount">¥{{ amounts[currentAmount].value }}</span>
          </div>
          <p class="warning">请仔细核对充值号码，充错号码将无法退款</p>
          <button class="recharge-btn">开始充值</button>
        </div>
        <!-- 流量充值区域（可根据需求补充） -->
        <div v-else-if="currentActive === 1" class="flow-recharge-area">
          <h3 class="recharge-title">流量充值</h3>
          <!-- 流量充值具体内容可后续补充 -->
          <p>流量充值功能待完善...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import dollarImg from '../../../assets/imgs/topup/dollar.png';
import flowImg from '../../../assets/imgs/topup/liuliang.png';
let phoneInput=ref('');
const items = [
  { text: '话费充值', img: dollarImg },
  { text: '流量充值', img: flowImg },
];
const amounts = [
  { value: 100, price: '售100元' },
  { value: 200, price: '售200元' },
  { value: 300, price: '售300元' },
  { value: 500, price: '售500元' },
];

const currentActive = ref(0);
const currentAmount = ref(0);
</script>

<style scoped lang="scss">
.main-tab {
  width: 100%;
  padding: 0 200px;
  margin-top: 10px;
background-color: rgb(245, 245, 245);
  .tabs-container {
    display: flex;
    height: calc(100vh - 100px); // 留出顶部导航等空间
    width: 100%;

    .left-section {
      flex: 0 0 200px; // 固定宽度
      background-color: #fff;
      border: 1px solid #eee;
      border-radius: 5px;
      margin-right: 10px;

      .item {
        width: 100%;
        height: 80px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
          background-color: #f8f8f8;
        }

        &.active {
          background-color: #FFF1F2;
          color: #e22326;
        }

        .item-icon {
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }

        .item-text {
          font-size: 16px;
        }
      }
    }

    .right-section {
      flex: 1;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 20px;
      background-color: #fff;
    }

    .recharge-area {
      h3.recharge-title {
        font-size: 20px;
        color: #333;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e22326;
        display: inline-block;
      }

      .phone-number {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        label {
          width: 80px;
          font-size: 14px;
          color: #666;
        }

        .phone-input {
          width: 200px;
          height: 30px;
          padding: 0 10px;
          border: 1px solid #ddd;
          border-radius: 3px;
          margin-right: 10px;
        }

        .carrier {
          font-size: 14px;
          color: #666;
          margin-right: 20px;
        }

        .order-link {
          color: #e22326;
          text-decoration: none;
          font-size: 14px;
        }
      }

      .amount-area {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;

        label {
          width: 80px;
          font-size: 14px;
          color: #666;
          display: inline-block;
          margin-top: 5px;
        }

        .amount-btn {
          width: 120px;
          height: 60px;
          border: 1px solid #ddd;
          border-radius: 3px;
          margin-right: 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          transition: all 0.2s;

          &:hover {
            border-color: #e22326;
          }

          &.selected {
            border: 2px solid #e22326;
            background-color: #FFF1F2;
          }

          .amount {
            font-size: 16px;
            color: #333;
          }

          .price {
            font-size: 14px;
            color: #e22326;
          }
        }
      }

      .coupon-area {
        margin-bottom: 20px;

        label {
          width: 80px;
          font-size: 14px;
          color: #666;
          display: inline-block;
          vertical-align: top;
        }

        .coupon-option {
          display: block;
          margin-bottom: 10px;

          input {
            margin-right: 5px;
          }

          label {
            width: auto;
            font-size: 14px;
            color: #333;
          }

          .coupon-tip {
            font-size: 12px;
            color: #999;
            margin-left: 25px;
            margin-top: 2px;

            a {
              color: #e22326;
              text-decoration: none;
            }
          }
        }
      }

      .pay-amount {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        label {
          width: 80px;
          font-size: 14px;
          color: #666;
        }

        .total-amount {
          font-size: 24px;
          color: #e22326;
          font-weight: bold;
        }
      }

      .warning {
        font-size: 12px;
        color: #ff6600;
        margin-bottom: 20px;
      }

      .recharge-btn {
        width: 120px;
        height: 40px;
        background-color: #e22326;
        color: #fff;
        border: none;
        border-radius: 3px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
          background-color: #c9191e;
        }
      }
    }

    .flow-recharge-area {
      h3.recharge-title {
        font-size: 20px;
        color: #333;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e22326;
        display: inline-block;
      }

      p {
        font-size: 14px;
        color: #666;
        margin-top: 20px;
      }
    }
  }
}
</style>
